<script setup>
defineProps({
  title: {
    type: String,
    default: '龙蜥社区系统运维联盟',
  },
  desc: {
    type: [String, Array],
    default: '共创运维产业繁荣',
  }
})
</script>

<template>
  <div class="banner-wrap">
    <slot name="bg">
      <!-- 需要有 banner-bg 的class名，图片以背景图方式展示 -->
    </slot>

    <div class="container">
      <h1 class="title">{{ title }}</h1>
      <p class="desc">
        <template v-if="Array.isArray(desc)">
          <span v-for="(t, i) in desc" :key="i">{{ t }}</span>
        </template>
        <template v-else>{{ desc }}</template>
      </p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.banner-wrap {
  width: 100%;
  height: 318px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 0;
  overflow: hidden;

  &::before {
    content: '';
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background-image: linear-gradient(102deg, #00E6C1 0%, rgba(20,186,241,0.20) 44%, rgba(44,203,255,0.06) 82%, rgba(45,137,255,0.00) 100%);
    background-size: cover;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
  }

  :deep(.banner-bg) {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    overflow: hidden;
  }

  .container {
    margin: 0 auto;
    padding: 0 52px;
    width: 1180px;
    // background: url('@/assets/img/home/banner_text.png') 50px 0px no-repeat;
    background-size: auto 115px;
  }

  .title {
    min-height: 68px;
    font-size: 56px;
    color: white;
    line-height: 68px;
    letter-spacing: 0;
    font-weight: 700;
  }

  .desc {
    margin-top: 12px;
    min-height: 38px;
    font-size: 30px;
    line-height: 38px;
    color: white;
    letter-spacing: 0;
    font-weight: 700;
    span {
      display: block;
    }
  }
}
</style>
